<template>
	<view>
		
		<view class="head">
			<view class="row-head">
				<view class="title">
					<view class="title-return title-minbox">
						<image src="../../static/czimg/202@2x.png" mode="" class="returnicon"></image>
					</view>
					<view class="title-zn title-minbox">
						<text>汽车改装</text>
					</view>
					<view class="title-integral title-minbox">
						<view class="title-minbox-icon"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="row-content">
				<!-- 大图 -->
				<view class="landscape">
					<image src="../../static/czimg/gzbanner@2x.png" class="landscape-img"></image>
				</view>
				<!-- 我的车信息 -->
				<view class="mycarmessage">
					<view class="mycarmessage-imgbox"></view>
					<view class="mycarmessage-content">
						<view class="mycarmessage-content-toptitle">
							<text>沃尔沃新能源</text>
						</view>
						<view class="mycarmessage-content-text">
							<text>豪华版</text>
						</view>
					</view>
					<view class="mycarmessage-change">
						<image src="../../static/czimg/huanche@2x.png" mode="" class="change-icon"></image>
						<text>换车</text>
					</view>
				</view>
				<!-- 服务选择 -->
				<view class="choseservice">
					<view class="choseservice-box">
						<image src="" mode="" class="choseservice-imgbox"></image>
						<view class="choseservice-title">影响改装</view>
					</view>
					<view class="choseservice-box">
						<image src="" mode="" class="choseservice-imgbox"></image>
						<view class="choseservice-title">影响改装</view>
					</view>
					<view class="choseservice-box">
						<image src="" mode="" class="choseservice-imgbox"></image>
						<view class="choseservice-title">影响改装</view>
					</view>
					<view class="choseservice-box">
						<image src="" mode="" class="choseservice-imgbox"></image>
						<view class="choseservice-title">影响改装</view>
					</view>
					<view class="choseservice-box">
						<image src="" mode="" class="choseservice-imgbox"></image>
						<view class="choseservice-title">影响改装</view>
					</view>
				</view>
				<!-- 限时活动 -->
				<view class="limitactivities">
					<view class="limitactivities-box">
						<view class="limitactivities-title">
							<view class="limitactivities-titletext">
								<text>限时活动</text>
							</view>
						</view>
						<view class="timeover">
							<view class="timeover-box">
								<view class="timeover-text">距离结束</view>
								<view class="countdown">00:00:00</view>
							</view>
						</view>
					</view>
				    <!-- 水平滑动渲染 -->
				    <view class="eventdetails">
				    	<scroll-view class="cardList" scroll-x="true" style="width:100%;">
				    		<text class="cardList-box" v-for="(item) in list" :key="item">
								<text class="cardList-box-img">
									<image src="" mode="" class="cardList-box-imgbox"></image>
								</text>
								<text class="cardList-box-text">
									哈曼 汽车音响
								</text>
								<text class="cardList-box-price">
									<text class="cardList-box-nowprice">¥2580.00</text>
									<text class="cardList-box-beforeprice">¥2680.00</text>
								</text>
								<text class="buynow">立即购买</text>
							</text>
				    	</scroll-view>
				    </view>
				</view>
			</view>
		</view>
		<!-- 精选推荐 -->
		<view class="selection">
			<text>精选推荐</text>
		</view>
		<guesslike></guesslike>
	</view>
</template>

<script>
	import guesslike from "../../components/guesslike/guesslike.vue"
	export default {
		components:{
			guesslike
		},
		data() {
			return {
				list:['0','2','3'],
				
			}
		},
	
		methods: {

		},
		
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 284rpx;
		background-color: #FF4D53;
		border-radius: 0 0 25rpx 25rpx;

		.row-head {
			width: 690rpx;
			height: 100%;
			overflow: hidden;
			margin: 0 auto;

			.title {
				width: 100%;
				height: 42rpx;
				margin-top: 114rpx;
				// background-color: blue;
				display: flex;

				.title-minbox {
					width: 230rpx;
					height: 100%;

					.returnicon {
						width: 20rpx;
						height: 40rpx;
					}
				}

				.title-zn {
					font-size: 38rpx;
					text-align: center;
					line-height: 42rpx;
					color: #FFFFFF;
					
				}

				.title-integral {
					// flex-grow: 1;
					font-size: 24rpx;
					text-align: right;
					line-height: 42rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: flex-end;
					background-color: #FF4D53;

					.title-minbox-icon {
						width: 40rpx;
						height: 40rpx;
						background-color:  #FF4D53;
					}
				}

				.title-return {
					flex-grow: 1;
				}
			}

			.chose {
				width: 680rpx;
				height: 32rpx;
				margin: 0 auto;
				margin-top: 54rpx;
				display: flex;
				justify-content: space-between;
				text-align: center;
				line-height: 32rpx;
				color: #FFFFFF;
				font-size: 22rpx;

				.chose-title {
					width: 96rpx;
					height: 100%;

					// background-color: green;
					.titlesize {
						font-size: 32rpx;
					}
				}
			}
		}
	}

	// 内容
	.content {
		width: 750rpx;

		.row-content {
			width: 690rpx;
			margin: 0 auto;
			margin-top: -70rpx;

			.landscape {
				width: 100%;
				height: 200rpx;
				border-radius: 25rpx;
				background-color: green;

				.landscape-img {
					width: 690rpx;
					height: 200rpx;
				}
			}

			// 我的的信息
			.mycarmessage {
				width: 100%;
				height: 66rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				// background-color: green;
				.mycarmessage-imgbox {
					width: 132rpx;
					height: 100%;
					background-color: red;
				}

				.mycarmessage-content {
					width: 378rpx;
					height: 100%;
					margin-left: 20rpx;

					.mycarmessage-content-toptitle {
						width: 100%;
						height: 32rpx;
						font-size: 32rpx;
						line-height: 32rpx;
						color: #333333;
						// margin-top: 10rpx;
					}

					.mycarmessage-content-text {
						width: 100%;
						height: 24rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #999999;
						margin-top: 3rpx;
					}
				}

				.mycarmessage-change {
					width: 80rpx;
					height: 24rpx;
					margin-left: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// margin-right: 10rpx;
					font-size: 24rpx;
					color: #999999;

					.change-icon {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}

			// 选择服务
			.choseservice {
				width: 656rpx;
				height: 138rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.choseservice-box {
					width: 96rpx;
					height: 100%;

					.choseservice-imgbox {
						width: 100%;
						height: 102rpx;
						background-color: red;
					}

					.choseservice-title {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #333333;
						text-align: center;
					}

				}
			}

			// 限时活动
			.limitactivities {
				width: 690rpx;
				.limitactivities-box {
					width: 100%;
					height: 40rpx;
					margin-top: 50rpx;
					display: flex;

					.limitactivities-titletext {
						height: 100%;
						flex-grow: 1;
						font-size: 36rpx;
						line-height: 40rpx;
						color: #333333;
						border-left: 10rpx solid red;
						box-sizing: border-box;
						padding: 0 0 0 10rpx;
					}

					.timeover {
						height: 100%;
						flex-grow: 1;
						display: flex;
						justify-content: flex-end;

						.timeover-box {
							width: 230rpx;
							height: 100%;
							border: 4rpx solid #FF9100;
							border-radius: 10rpx;
							display: flex;

							.timeover-text {
								width: 100rpx;
								height: 100%;
								background-color: #FF9100;
								color: #FFFFFF;
								font-size: 22rpx;
								// line-height: 40rpx;
								text-align: center;
							}

							.countdown {
								flex-grow: 1;
								color: #333333;
								font-size: 22rpx;
								text-align: center;
								// line-height: 40rpx;
							}
						}
					}
				}
			    // 水平滑动区域
			    .cardList {
			    	// width: 828rpx;
			    	height: 465rpx;
			    	white-space: nowrap;
			    	display: inline-block;
					margin-top: 20rpx;
			    	.cardList-box{
						display: inline-block;
			    		width: 288rpx;
			    		height: 100%;
			    		margin-right: 20rpx;
			    		// background-color: green;
						.cardList-box-img{
							display: block;
							width: 100%;
							height: 288rpx;
							background-color: red;
							.cardList-box-imgbox{
								width: 100%;
								height: 100%;
							}
						}
						.cardList-box-text{
							display: block;
							width: 100%;
							margin-top: 5rpx;
						}
						.cardList-box-price{
							display: block;
							width: 100%;
							margin-top: 16rpx;
							.cardList-box-nowprice{
								color: #FF0000;
								font-size: 32rpx;
							}
							.cardList-box-beforeprice{
								text-decoration: line-through;
								color: #d0d0d0;
								font-size: 20rpx;
								margin-left: 30rpx;
							}
						}
						.buynow{
							display: block;
							width: 100%;
							height: 48rpx;
							background-color: #FF4D53;
							border-radius: 8rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 48rpx;
							font-size: 28rpx;
							margin-top: 24rpx;
							// margin-top: 16rpx;
						}
			    	}
			    }
			}

		}
	}
	.selection{
		width: 690rpx;
		margin: 0 auto;
		font-size: 36rpx;
		// line-height: 40rpx;
		color: #333333;
		border-left: 10rpx solid red;
		box-sizing: border-box;
		padding: 0 0 0 10rpx;
		margin-top: 40rpx;
	}
</style>
